<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<div id="box">
    <label for="male">男</label>
    <input type="radio" id="male" v-model="gender" value="男">
    <label for="female">女</label>
    <input type="radio" id="female" v-model="gender" value="女">
    <br>
    <a href="" style="text-decoration: none; display: block; width: 50px;
  height: 50px;margin-top: 20px; ">{{gender}}</a>
    <br>
    <input type="checkbox" @change="num" v-model="hobby" value="唱">
    <input type="checkbox" @change="num" v-model="hobby" value="跳">
    <input type="checkbox" @change="num" v-model="hobby" value="篮球">
    <input type="checkbox" @change="num" v-model="hobby" value="rap">
    {{hobby}}
    <br>
    <input type="checkbox" v-model="isBeauty">
    {{ isBeauty?'大美女':'好姑娘'}}
    <br>
    <a href="" v-html="text"></a>
    <br>
    <button v-bind:a="b">按钮</button>
    <label for="meinv1">韩民国</label>
    <input type="radio" v-model="meinv"
     value="https://img0.baidu.com/it/u=3385287067,713784497&fm=26&fmt=auto&gp=0.jpg" id="meinv1">
    <label for="meinv2">韩万岁</label>
    <input type="radio" v-model="meinv"
        value="https://img0.baidu.com/it/u=2151537073,2056538414&fm=26&fmt=auto&gp=0.jpg" id="meinv2">
       <input type="radio" v-model="meinv" value="https://img0.baidu.com/it/u=3361263838,161441639&fm=26&fmt=auto&gp=0.jpg">
        <br>
    <img v-bind:src="meinv" alt="" width="400px">
</div>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data: {
                gender: '男',
                hobby: [],
                isBeauty: '',
                text: `
             <h2 style="color:red">我是2级标题</h2>
             `,
                b: "自定义属性",
                meinv: ''
            },
            methods: {
                num() {
                    if (this.hobby.length >= 3) {
                        this.isBeauty = true
                    } else {
                        this.isBeauty = false
                    }
                }

            }

        })


    </script>
</body>

</html>